<template>
  <p>
    Ask a yes/no question
    <input v-model="question" />
  </p>
  <p>{{ answer }}</p>
</template>

<script setup>
import { ref, watch } from 'vue'

const question = ref('')
const answer = ref('question usually contain a question mark,')

// 可以直接侦听一个ref
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.indexOf('?') > -1) {
    answer.value = 'thinking....'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = res
    } catch (error) {
      answer.value = 'error' + error
    }
  }
})
</script>
